<template>
  <!---------- 搜索表单区域 ----------->
  <SearchFormTemplate ref="searchRef" :searchConfig="searchConfig" />

  <!---------- 顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格区域 ----------->
  <TableTemplate ref="tableRef" :columns="columns" />

  <!-- 通道添加表单 -->
  <ChannelAdd ref="addRef" @dataReload="getTableData" />

  <!-- 通道修改表单 -->
  <ChannelEdit ref="editRef" @dataReload="getTableData" />
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import SearchFormTemplate from '@/components/template/form/search-form-template.vue'; // 搜索区模版
  import ToolbarTemplate from '@/components/template/button/toolbar-template.vue'; // 操作区模版
  import TableTemplate from '@/components/template/table/table-template.vue'; //分页表格模版

  import ChannelAdd from '@/views/channel/channel_add.vue'; //通道添加页
  import ChannelEdit from '@/views/channel/channel_edit.vue'; //通道修改页
  import { type CustomTableColumnType } from '@/types/table'; //扩展 TableColumnType 定义

  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  const onAdd = () => {
    addRef.value?.show(); //调用子组件 显式弹窗方法
  };
  const addRef = ref<typeof ChannelAdd | null>(null); //通道添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    editRef.value?.show(id); //调用子组件 显示 弹窗方法
  };
  const editRef = ref<typeof ChannelEdit | null>(null); //通道修改模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => {
    await tableRef.value?.getTableData(pageAction, pageParams);
  };
  const tableRef = ref<typeof TableTemplate | null>(null); //table-template组件引用，用与调用模态弹窗组件内部方法
  const pageAction = 'base.manage.channel.ServiceImpl.page'; //page接口 方法名
  const pageParams = {}; //page接口 参数

  onMounted(() => {
    getTableData();
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig = [
    {
      text: '新建',
      type: 'primary',
      icon: 'add' as const,
      permission: 'channel_add',
      onClick: onAdd,
    },
  ];

  /* [搜索配置] */
  const searchConfig = [
    { title: '通道编码', dataIndex: 'channel_code', type: 'input' as const, width: 150 },
    { title: '通道名称', dataIndex: 'channel_name', type: 'input' as const, width: 150 },
    {
      title: '开启状态',
      dataIndex: 'channel_status',
      type: 'select' as const,
      options: [
        { label: '启用', value: 1 },
        { label: '停用', value: 2 },
      ],
    },
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [
    { title: '通道编码', fixed: 'left', dataIndex: 'channel_code', width: 180 },
    { title: '通道名称', dataIndex: 'channel_name', width: 180 },
    { title: '开启状态', dataIndex: 'channel_status', options: { 1: '启用', 2: '停用' } },
    { title: '备注', dataIndex: 'remark', width: 350 },
    {
      title: '操作',
      dataIndex: 'action',
      buttons: [
        {
          children: () => '修改',
          type: 'link',
          permission: 'channel_edit',
          onClick: (record) => onEdit(record.channel_id),
        },
      ],
    },
  ];
</script>
<style lang="less" scoped></style>
